<template>
  <div style="padding-bottom: 30px;">
    <ArticleCategory
      :loading="firstLoading"
      :article-list="pagination.list"
      category="1"
      @delete-arc="deleteArticle"
      @set-top="setArticleTop"
    />
  </div>
</template>

<script>
import ArticleCategory from '../components/ArticleCategory'
import userMixin from '~/mixin/user'
import ScrollLoadEvent from '~/util/scrollLoadEvent'
export default {
  name: 'UserArticle',
  components: { ArticleCategory },
  mixins: [userMixin],
  created () {
    this.findUserActionList('/gimishare/api/v1/articles/listByUserId')
  },

  mounted () {
    this.scrollLoadEvent = new ScrollLoadEvent(
      this.findUserActionList.bind(this, '/gimishare/api/v1/articles/listByUserId', true)
    )
    this.$nextTick(() => {
      this.scrollLoadEvent.bindScrollEvent()
    })
  },

  methods: {
    deleteArticle (articleId) {
      const idx = this.pagination.list.findIndex((o) => o.id === articleId)
      if (idx > -1) {
        this.pagination.list.splice(idx, 1)
      }
    },

    setArticleTop () {
      this.firstLoading = true
      this.pagination.pageNo = 0
      this.pagination.list = []
      this.findUserActionList('/gimishare/api/v1/articles/listByUserId', true)
    }
  }
}
</script>
